<template>
    <div class="commdetail">
      <div class="detail_hander">
        <h1 class="detail_title">商品查看</h1>
      </div>
      <div class="detail_cotent">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称">
            <el-input disabled placeholder="请输入商品名称" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input disabled placeholder="请输入商品描述" v-model="form.subtitle"></el-input>
          </el-form-item>
          <el-form-item label="当前状态">
            <el-input disabled placeholder="请输入商品描述" v-if="!form.status" value="已下架"></el-input>
            <el-input disabled placeholder="请输入商品描述" v-else value="在售"></el-input>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-select v-model="form.region"  @change="regionChange" placeholder="请选择一级品类">
              <el-option
                v-for="(item,index) in region1list"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>`
            <el-select v-if="form.region" v-model="form.region2" placeholder="请选择二级品类">
              <el-option
                v-for="(item,index) in region2list"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>`
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input disabled class="inp" placeholder="价格" v-model="form.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <!-- stock -->
            <el-input disabled class="inp" placeholder="库存" v-model="form.stock">
              <template slot="append">件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品图片">
            <img class="image" v-if="form.mainImage" :src="form.imageHost+form.subImages" alt srcset />
            <!-- 本地可以访问 -->
            <!-- <img class="image" v-if="form.mainImage" :src="form.mainImage" alt srcset /> -->
            <!-- <img
              class="image"
              v-else
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113118119&di=d3fbabb647a1691ced3e6ae869b293a3&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D30305038%2C711507037%26fm%3D214%26gp%3D0.jpg"
              alt
              srcset
            /> -->
          </el-form-item>
          <el-form-item label="商品详情">
            <!-- v-html="form.detail"  禁止使用 容易导致攻击 RSS跨站脚本攻击   CSRF 跨站身份伪造) -->
            <p v-html="form.detail"></p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { detail,categoryList  } from "@/api/index";
  export default {
    data() {
      return {
        form: {},
        region1list:[],
        region2list:[],
      };
    },
    mounted() {
        // console.log(this.$route.params.data)
        // 商品详情页数据
        detail({productId:this.$route.params.data}).then((res) =>{
          console.log(res)
          this.form = res.data.data;

        })
        this.getCategoryList();
    },
    methods: {
      getCategoryList(){
        //一级品类
        categoryList().then(res=>{
          console.log(res)
          this.region1list = res.data.data;
        })
      },
      regionChange(v){
        console.log(v)
        this.region1list.map((item,index)=>{
          if (v === item.name) {
            // 二级品类
            categoryList({categoryId: item.id}).then(res=>{
              console.log(res)
              this.region2list = res.data.data;
            })
          }
        })

      }     
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "@/Scss/index.scss";
  .inp {
    width: 30%;
  }
  .image {
    width: 100px;
    height: 100%;
  }
  .detail_cotent {
    @include Wm(90%);
  }
  .detail_hander {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .detail_title {
    display: inline-block;
    font-weight: normal;
  }
  .commdetail {
    @include Wm(95%);
  }
  </style>